<template>
    <div>
<!--        <div class="title">用户详情</div>-->
        <div class="tabbar">
          <div class="actions">
              <el-button type="primary" @click="show_user_order_dialog">查询充电订单</el-button>
              <el-button plain type="danger">加入用户黑名单</el-button>
          </div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="baseinfo"></el-tab-pane>
          </el-tabs>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-card style="height: 100%;">
                <div class="user">
                  <div class="avatar">
                      <img :src="userinfo.avatar" style="width: 80px;"/>
                  </div>
                  <div class="flex-column">
                      <span style="font-weight: bold;">{{userinfo.nickName}}</span>
                      <span>-</span>
                      <span>{{userinfo.phone}}</span>
                  </div>
                </div>
                <div style="border-top: 1px dashed #CCC; margin-top: 10px; padding-top: 10px;">
                  <el-row>
                    <el-col :span="6">用户来源</el-col>
                    <el-col :span="18">{{userinfo.userType == 1 ? '支付宝' : '微信小程序'}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6">用户微信OpenID</el-col>
                    <el-col :span="18">{{userinfo.openid}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6">加入时间</el-col>
                    <el-col :span="18">{{userinfo.createTime}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6">最近一次充电时间</el-col>
                    <el-col :span="18">{{userinfo.last_change_time}}</el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
            <el-col :span="14">
            <el-card>
              <div style="display: flex;">
                <div style="width: 130px;"><img :src="asset.USER_DETAIL"/></div>
                <div class="statistics">
                  <div>
                    <el-statistic title="钱包余额" :value="parseFloat(userinfo.money || 0)" :precision="2" suffix="元" ></el-statistic>
                    <el-statistic title="赠送金额" :value="parseFloat(userinfo.gift_amount || 0)" :precision="2" suffix="元" ></el-statistic>
                  </div>
                  <div>
                    <el-statistic title="总充值" :value="parseFloat(userinfo.deposit_all || 0)" :precision="2" suffix="元" ></el-statistic>
                    <el-statistic title="总消费" :value="parseFloat(userinfo.xiaofei_all || 0)" :precision="2" suffix="元" ></el-statistic>
                    <el-statistic title="总退款" :value="parseFloat(userinfo.refund_all || 0)" :precision="2" suffix="元" ></el-statistic>
                    <el-statistic title="待退款" :value="parseFloat(userinfo.wiat_refund_all || 0)" :precision="2" suffix="元" ></el-statistic>
                    <el-statistic title="异常资金" :value="parseFloat(userinfo.car_abnormal_funds || 0)" :precision="2" suffix="元" ></el-statistic>
                  </div>
                  <div>
                    <el-button type="text" @click="show_recharge_record">查看充值记录</el-button>
                    <el-button type="text" @click="show_refund_record">查看退款记录</el-button>
                    <el-button type="text" @click="show_bonus_record">查看赠送金记录</el-button>
                  </div>
                </div>
                <div style="width: 100px;">
                  <el-button type="primary" @click="show_user_recharge_dialog">充值</el-button>
                </div>
              </div>
              <div class="user-level-box">
                <div class="user-level">
                  <span class="title">会员等级</span>
                  <div style="width: 100%; align-self: center; text-align: center">
                      <h1>{{userinfo.vip_name}}</h1>
                      <p>升级点数{{userinfo.vip_points}}</p>
                  </div>
                  <span style="position: absolute; top: 70px; right: 20px; cursor: pointer;" @click="show_change_user_level_dialog">调整等级 ></span>
                </div>
              </div>
            </el-card>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="24">
              <el-card>
                <el-row>
                  <el-col :span="4">加入的团体</el-col>
                  <el-col :span="18">暂无加入的团体</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">近30天的充电数据</el-col>
                  <el-col :span="18">
                    <span>充电次数：0次</span>
                    <span style="margin-left: 15px;">充电电量：0度</span>
                    <span style="margin-left: 15px;">充电费用：0元</span>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </div>


        <el-dialog title="查看充值记录" :visible.sync="rechargeRecordDialogVisible" width="70%" append-to-body>
            <RechargeRecord v-if="rechargeRecordDialogVisible" :key="uid" :uid="uid" />
        </el-dialog>

        <el-dialog title="查看退款记录" :visible.sync="refundRecordDialogVisible" width="70%" append-to-body>
            <RefundRecord v-if="refundRecordDialogVisible" :key="uid" :uid="uid" />
        </el-dialog>

        <el-dialog title="查看赠送金记录" :visible.sync="bonusRecordDialogVisible" width="70%" append-to-body>
            <BonusRecord v-if="bonusRecordDialogVisible" :key="uid" :uid="uid" />
        </el-dialog>


        <el-dialog title="用户订单" :visible.sync="userOrderDialogVisible" width="70%" append-to-body>
            <OrderList v-if="userOrderDialogVisible" :key="uid" :uid="uid" key="OrderLists" source="user_detail" />
        </el-dialog>

        <el-dialog title="充值余额" :visible.sync="userRechargeDialogVisible" width="60%" append-to-body>
            <Recharge v-if="userRechargeDialogVisible" :key="uid" :uid="uid" :user="userinfo" @close="close_user_recharge_dialog" />
        </el-dialog>

        <el-dialog title="修改等级" :visible.sync="changeUserLevelDialogVisible" width="60%" append-to-body>
            <ChangeUserLevel v-if="changeUserLevelDialogVisible" :key="uid" :uid="uid" @close="hide_change_user_level_dialog" />
        </el-dialog>
    </div>
</template>

<script>
  import * as api from "@/api/user/user";
  import asset from "@/utils/asset";
  import OrderList from "@/components/Common/order/OrderList.vue";
  import Recharge from "@/components/Common/user/components/Recharge.vue";
  import ChangeUserLevel from "@/components/Common/user/components/ChangeUserLevel.vue";
  import RechargeRecord from "@/components/Common/user/components/RechargeRecord.vue";
  import RefundRecord from "@/components/Common/user/components/RefundRecord.vue";
  import BonusRecord from "@/components/Common/user/components/BonusRecord.vue";
  export default {
    name: 'Detail',
    components: { OrderList,Recharge,ChangeUserLevel,RechargeRecord,
    RefundRecord,BonusRecord },
    props: {
      uid: {
        type: Number
      },
    },
    data() {
      return {
        asset,
        activeName:'baseinfo',
        userinfo:{},
        rechargeRecordDialogVisible:false,
        refundRecordDialogVisible:false,
        bonusRecordDialogVisible:false,
        userOrderDialogVisible:false,
        userRechargeDialogVisible:false,
        changeUserLevelDialogVisible:false,
      };
    },
    mounted(){
      this.load_user()
    },
    methods: {
      parseFloat(num){
        return parseFloat(num)
      },
      load_user(){
        api.getUser(this.uid).then(res => {
          console.log('res', res)
          this.userinfo = res.data
        })
      },
      show_recharge_record(){
        this.rechargeRecordDialogVisible = true
      },
      show_refund_record(){
        this.refundRecordDialogVisible = true
      },
      show_bonus_record(){
        this.bonusRecordDialogVisible = true
      },
      show_user_order_dialog(){
        // this.userOrderDialogVisible = true
      },
      show_user_recharge_dialog(){
        this.userRechargeDialogVisible = true
      },
      close_user_recharge_dialog(){
        this.load_user()
        this.userRechargeDialogVisible = false
      },
      show_change_user_level_dialog(){
        this.changeUserLevelDialogVisible = true
      },
      hide_change_user_level_dialog(){
        this.load_user()
        this.changeUserLevelDialogVisible = false
      },
    }
  }
</script>

<style lang="scss" scoped>
    .tabbar {
        position: relative;
        .actions {
            position: absolute;
            top: 0;
            right: 10px;
            z-index: 10;
        }
    }
    .user {
        display: flex;
        >div {
            &:nth-child(1) {

            }
            &:nth-child(2) {
                margin-left: 10px;
                justify-content: space-around;
            }
        }
    }
    .statistics {
        flex: 1;
        padding: 0 10px;
        > div {
            display: flex;
            &:nth-child(1) {

            }
            &:nth-child(2) {
                margin-top: 20px;
            }
            &:nth-child(3) {
                margin-top: 30px;
                button {
                    color: #409eff;
                    font-weight: 600;
                }
            }
        }
        :deep(.el-statistic) {
            padding: 0 10px;
            .el-statistic__head {
                color: #8087a0;
            }
            .el-statistic__content {
                color: #5278e2;
                .el-statistic__number {
                    color: #5278e2;
                    font-size: 24px;
                    font-weight: 600;
                }
            }
        }
    }
    .user-level-box {
        margin-top: 20px;
        border-top: 1px dashed #CCC;
        padding-top: 20px;
        .user-level {
            height: 150px;
            background: #7b98e8 url() no-repeat 100% 0;
            border-radius: 20px;
            position: relative;
            display: flex;
            color: #FFF;
            .title {
                background-color: #5278e2;
                border-radius: 22px 0 25px 0;
                font-size: 14px;
                height: 28px;
                line-height: 30px;
                color: #fff;
                padding: 0 20px;
                position: absolute;
                top: 0;
            }
        }
    }
</style>
